import React from 'react'
import { enquireScreen } from 'enquire-js'

import Top from './header/Top'
import Header from './header/Header'
import ContentDestination from './content/Content-Destination'
import ContentStudy from './content/Content-Study'
import ContentLeader from './content/Content-Leader'
import ContentLecturer from './content/Content-Lecturer'
import ContentTutor from './content/Content-Tutor'
import ContentStudents from './content/Content-Students'
import ContentThoughtWorks from './content/Content-ThoughtWorks'
import Footer from './footer/Footer'

import * as dataSource from './data.source'
import './less/antMotionStyle.less'

let isMobile
enquireScreen((b) => {
  isMobile = b
})

const { location } = window

export default class Home extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      isMobile,
      show: !location.port
    }
  }

  componentDidMount () {
    enquireScreen((b) => {
      this.setState({ isMobile: !!b })
    })
    if (location.port) {
      setTimeout(() => {
        this.setState({
          show: true
        })
      }, 500)
    }
  }

  render () {
    const children = [
      <Top
        id='Top'
        key='Top'
        dataSource={dataSource.TopDataSource}
        isMobile={this.state.isMobile}
      />,
      <Header
        id='Header'
        key='Header'
        dataSource={dataSource.HeaderDataSource}
        isMobile={this.state.isMobile}
      />,
      <ContentDestination
        id='ContentDestination'
        key='ContentDestination'
        dataSource={dataSource.ContentDestinationDataSource}
        isMobile={this.state.isMobile}
      />,
      <ContentStudy
        id='ContentStudy'
        key='ContentStudy'
        dataSource={dataSource.ContentStudyDataSource}
        isMobile={this.state.isMobile}
      />,
      <ContentLeader
        id='ContentLeader'
        key='ContentLeader'
        dataSource={dataSource.ContentLeaderDataSource}
        isMobile={this.state.isMobile}
      />,
      <ContentLecturer
        id='ContentLecturer'
        key='ContentLecturer'
        dataSource={dataSource.ContentLecturerDataSource}
        isMobile={this.state.isMobile}
      />,
      <ContentTutor
        id='ContentTutor'
        key='ContentTutor'
        dataSource={dataSource.ContentTutorDataSource}
        isMobile={this.state.isMobile}
      />,
      <ContentStudents
        id='ContentStudents'
        key='ContentStudents'
        dataSource={dataSource.ContentStudentsDataSource}
        isMobile={this.state.isMobile}
      />,
      <ContentThoughtWorks
        id='ContentThoughtWorks'
        key='ContentThoughtWorks'
        dataSource={dataSource.ContentThoughtWorksDataSource}
        isMobile={this.state.isMobile}
      />,
      <Footer
        id='Footer'
        key='Footer'
        dataSource={dataSource.Footer20DataSource}
        isMobile={this.state.isMobile}
      />
    ]
    return (
      <div
        className='templates-wrapper'
        ref={(d) => {
          this.dom = d
        }}
      >
        {this.state.show && children}
      </div>
    )
  }
}
